<template>
    <div class="change-car-binding">
        <div class="change-car-binding-detail font-size-26">
            <div class="item display-flex align-center">
                <div>
                    <span class="label">过车单号</span>
                    <span>{{ bindingDetail.info.orderNo || '--' }}</span>
                </div>
                <div class="sign">
                    出仓过车
                </div>
            </div>
            <div class="item">
                <span class="label">仓库</span>
                <span>{{ bindingDetail.list && bindingDetail.list.length > 0? bindingDetail.list[0].spckmc : '--' }}</span>
            </div>
            <div class="item">
                <span class="label">过车日期</span>
                <span>{{ bindingDetail.info.changeDate || '--' }}</span>
            </div>
            <div class="item">
                <span class="label">件数重量</span>
                <span>{{ bindingDetail.sumList.spjs}}件； {{ bindingDetail.sumList.spsl}}吨</span>
            </div>
            <div class="item">
                <span class="label">车牌号</span>
                <span>{{ bindingDetail.info.cardNo || '--' }}</span>
            </div>
            <div class="item">
                <span class="label">司机姓名</span>
                <span>{{ bindingDetail.info.driverName || '--' }}</span>
            </div>
            <div class="item">
                <span class="label">联系电话</span>
                <span>{{ bindingDetail.info.phone || '--' }}</span>
            </div>
            <div class="item">
                <span class="label">创建时间</span>
                <span>{{ bindingDetail.info.createTime || '--' }}</span>
            </div>
            <div class="item">
                <span class="label">单据状态</span>
                <span>{{ bindingDetail.info.orderStatus === '1'?'已完成':bindingDetail.info.orderStatus === '0'?'待作业':'' }}</span>
            </div>
            <div class="item">
                <span class="label">单据备注</span>
                <span class="red">{{ bindingDetail.info.remark || '' }}</span>
            </div>
        </div>
        <div class="change-car-binding-list" v-for="(item, index) in bindingDetail.list" :key="index">
            <div class="title display-flex justify-between">
                <span v-if="index === 0" class="text-bold font-size-26">货物信息</span>
                <div class="text-center flex-item font-size-26" :style="index === 0?'margin-left:-50px':''">{{ index + 1}}/{{bindingDetail.list.length}}</div>
            </div>
            <div class="change-car-binding-detail font-size-26" >
                <div class="item mt-20">
                    <span class="label">品名规格</span>
                    <span>{{ item.spzs }}</span>
                </div>
                <div class="item">
                    <span class="label">单重(KG)</span>
                    <span>{{ item.spjsl }}</span>
                </div>
                <div class="item">
                    <span class="label">件数</span>
                    <span>{{ item.spjs }}</span>
                </div>
                <div class="item">
                    <span class="label">重量</span>
                    <span>{{ item.spsl }}吨</span>
                </div>
                <div class="item">
                    <span class="label">批号</span>
                    <span>{{ item.spbh || '--' }}</span>
                </div>
                <div class="item">
                    <span class="label">柜号</span>
                    <span>{{ item.spgh || '--' }}</span>
                </div>
                <div class="item">
                    <span class="label">品牌</span>
                    <span>{{ item.spcd || '--' }}</span>
                </div>
                <div class="item">
                    <span class="label">仓位</span>
                    <span>{{ item.ckcw || '--' }}</span>
                </div>
            </div>
        </div>
       
    </div>
</template>
<script setup lang="ts">
    import { onMounted, reactive  } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { getChangeCarBindingDetail } from '@/api/changeCar'
    import { NUMBER_DIGIT, WEIGHT_DIGIT } from '@/utils/constant'

    const route = useRoute()
    const router = useRouter()

    const bindingDetail:any = reactive({
        loading:false,
        query:{
           dzid:"" 
        },
        info:{
            orderNo:"",
            changeDate:"",
            cardNo:"",
            driverName:"",
            phone:"",
            createTime:"",
            orderStatus:"",
            remark:""
        },
        list:[],
        sumList:{
            spjs:"",
            spsl:""
        }
    })

    onMounted(() => {
        bindingDetail.query.changeId = route.query.changeId
        getList()
    })

    function getList() {
        bindingDetail.loading = true
        getChangeCarBindingDetail(bindingDetail.query).then((res: any) => {
          const data = res.data
          const list = data.changeCarDt
          bindingDetail.info = data.changeCar
          bindingDetail.list = list
          let spjs = 0
          let spsl = 0
          for(let i in list) {
            spjs += Number(list[i].spjs)
            spsl += Number(list[i].spsl)
          }
          bindingDetail.sumList = {
            spjs:Number(spjs.toFixed(NUMBER_DIGIT)),
            spsl:Number(spsl.toFixed(WEIGHT_DIGIT))
          }
          bindingDetail.loading = false 
        })
    }
</script>
<style lang="scss" scoped>
    .change-car-binding {
        background-color: #F3F4F7;
        &-list {
            .title {
                padding:0px 32px;
            }
        }
        
        &-detail {
            padding:28px 32px;
            background-color:#fff;
            border-radius: 10px;
            margin:36px;
            .item {
                margin-bottom:22px;
                .sign {
                    width:88px;
                    height:32px;
                    line-height: 32px;
                    color:#55CF55;
                    text-align: center;
                    border:1px solid #55CF55;
                    border-radius: 8px;
                    margin-left:30px;
                    font-size:20px;
                }
                .label {
                    color:#999;
                    width:160px;
                    display:inline-block;
                }
                .red{
                    color: #fa0000;
                }
            }
        }
    }
</style>